<template>
  <div style="min-width: 809px">
    <!-- 页面底部有总金额，参考原型 -->
    <div>
      <div class="vs-search-box">
        <el-form ref="form" :inline="true" :model="paging" label-width="120px">
          <el-form-item label="日期">
            <el-date-picker
              @change="chageDate"
              value-format="yyyy-MM-dd"
              v-model="date"
              style="width: 250px"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              placeholder="请选择"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="门店：">
            <el-select
              v-model="paging.store_id"
              placeholder="请选择"
              style="width: 250px"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="" class="vs-right-btns">
            <el-button @click="reset">重置</el-button>
            <el-button @click="handleCurrentChange(1)" type="primary"
              >查询</el-button
            >
            <el-button
              icon="el-icon-upload2"
              @click="exportFile()"
              :loading="isExport"
              >导出</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="vs-table-box">
        <!-- 图表 -->
        <div ref="ratio" style="width: 100%; height: 400px" class="total-number-tu" ></div>
        <div ref="moneys" style="width: 100%; height: 400px" class="total-number-tu" ></div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      date: "",
      paging: {
        store_id: "",
        date_start: "", //姓名
        date_end: "", //开始时间
      },
      storeList: [],
      tableData: {},
      isExport: false,
      source: [],
      achievement: {}
    };
  },
  async created() {
    // if (this.$route.path == "/storeSummary") {
      await this.getDate();
      await this.getAllStoreList();
      await this.handleCurrentChange(1);
    // }
  },
  methods: {
    // 导出文件
    async exportFile() {
      this.isExport = true;
      let res = await this.$Http.exportStoreAchieve(this.paging);
      this.utils.downloadXlsx(res, "门店业绩汇总表");
      this.isExport = false;
    },
    getDate() {
      var date = new Date();
      let date2 = new Date();
      date.setDate(1);
      var dateStart =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      var dateEnd = this.utils.getNowDate(date2, true);
      this.paging.date_start = dateStart;
      this.paging.date_end = dateEnd;
      this.date = [dateStart, dateEnd];
    },
    chageDate(e) {
      this.paging.date_start = e[0];
      this.paging.date_end = e[1];
    },
    // 获取全部门店
    async getAllStoreList() {
      let { code, data } = await this.$Http.homegetStore();
      if (code) {
        this.storeList = data;
        this.paging.store_id = data[0].id;
      }
    },
    async repairGetList() {
      this.loading = true;
      let { code, data } = await this.$Http.getAchievementByDate(this.paging);
      if (code) {
        this.achievement = data
        this.init();
        this.init2()
      }
      this.loading = false;
    },
    async init() {
      //第一幅图
      //门店业绩比率
      let ratio = this.$echarts.init(this.$refs.ratio);
      ratio.setOption({
         title: {
          text: '门店业绩',
          left: 'center',       // 位置居中
          top: 10               // 距离顶部 10px
        },
        legend: {},
        tooltip: {
          trigger: "item",
          // formatter: '{b}        {c}（元）'
        },
        xAxis: { 
          type: "category",
          data: this.achievement.date
         },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} 元'  // 在 Y 轴刻度旁加单位
          }
        },
        series: [
          { 
            type: "line",
            data: Object.values(this.achievement.achievement)
          },
        ],
      });
      window.onresize = function () {
        ratio.resize();
      };
    },
    async init2() {
      //第一幅图
      //门店业绩比率
      let ratio = this.$echarts.init(this.$refs.moneys);
      ratio.setOption({
        // title: {
        //   text: '支付方式',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'right'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: Object.values(this.achievement.pay_type)[0], name: '余额' },
              { value: Object.values(this.achievement.pay_type)[1], name: '微信' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      });
      window.onresize = function () {
        ratio.resize();
      };
    },
    reset() {
      this.paging.store_id = this.storeList[0].id;
      this.getDate();
      this.handleCurrentChange(1);
    },
    handleSizeChange(val) {
      this.repairGetList();
    },
    handleCurrentChange(val) {
      this.repairGetList();
    },
  },
};
</script>

<style lang="scss" scoped>

.vs-search-box {
  padding: 20px;
}
</style>